import {defineComponent, h, ref,reactive,watch,toRefs,onMounted,onUnmounted} from '@vue/runtime-core'
import  planeImg from '../assets/plane.png'

import {game} from "../game.js";
import {useKeyboard} from '../utils/useKeyboard.js'

export const selfPlaneInfo = {
    width: 308,
    height: 207
}
export default defineComponent({
    props:["x","y"],
    setup(props,ctx){
        //单单在父组件中改变x，y的值不奏效，不要慌，监听下传过来的东西是啥
        //方法1：改变x，y但响应式丢失
/*        const point = reactive({x:props.x,y:props.y}) //这样改变的x，y响应式丢失
        watch(props,(value)=>{
            console.log(value); //props是readOnly
            point.x = value.x
            point.y = value.y
        })*/
        //方法2：改变x，y没有响应式丢失

        //const {x,y} = toRefs(props)

        const x = ref(props.x)
        const y = ref(props.y)

        watch(props,(newProps)=>{
            x.value = newProps.x
            y.value = newProps.y
        })

        //按空格加子弹
        window.addEventListener("keydown", (e)=>{
            if (e.code ==="Space"){
                ctx.emit("attack",{ //给父组件传attack并且带一个对象
                    x:x.value+80,
                    y:y.value
                })
            }
        })
        return{
            X:x,
            Y:y,
            //X:props.x,
            //Y:props.y,
            //point
        }
    },
    render(ctx){
        //背景图片

        return h('Container',{x:ctx.X,y:ctx.Y},[ //这个要用定义的point的坐标
            h('Sprite',{texture:planeImg})
        ])
    }
})
